import React from 'react';
import {WeaSearchGroup, WeaFormItem, WeaSelect,WeaTools, WeaInput,WeaDialog,WeaLocaleProvider,WeaInputSearch,WeaNewScroll} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import {WeaMaterialLib} from 'weaPortalPublic';
import ETabWidth from './content/base/ETabWidth'
import ETabDisplay from './content/base/ETabDisplay'
import ETabStyle from './content/base/ETabStyle'
import {Button, Checkbox, message, Pagination} from "antd";
import { isEqual, isEmpty } from 'lodash';
// import Item from "../../../../../../pc4backstage/portal4engine/components/elementstylelib/Item";
import Item from "./content/base/Item";

class Tab4Style extends React.Component {
    state = {
        eShareLevel: this.props.eShareLevel,
        eStyleOptions: this.props.eStyle.eStyleList.options,
        eStyleSelected: this.props.eStyle.eStyleList.selected,
        eIcon: this.props.eStyle.eIcon,
        eHeight: this.props.eStyle.eHeight,
        eSpacing: this.props.eStyle.eSpacing,
        displayPosition: this.props.eStyle.displayPosition,
        etabwidth: this.props.eContent.etabwidth || '76',
        elementStyles : [],
        visible : false,
        length : 0,
    };

    constructor(props) {
        super(props);
        this.getSaveValues = this.getSaveValues.bind(this);
        this.onShow = this.onShow.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.getButtons = this.getButtons.bind(this);
        this.onOk = this.onOk.bind(this);
    }

    render() {
        const {eShareLevel, eStyleOptions, eStyleSelected, eIcon, eHeight, eSpacing, etabwidth ,visible,elementStyles,length, displayPosition} = this.state;
        const {eContent= {}} = this.props;
        const {tabStyleList={}}=eContent;
        let eStyleSelectedName = "";
        for(var i = 0; i <eStyleOptions.length; i++ ){
            if(eStyleSelected==eStyleOptions[i].key){
                eStyleSelectedName = eStyleOptions[i].value;
                break;
            }
        }

        const disabled = !(eShareLevel == '2');
        return (
            <div className="portal-mesetting-style">
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@w03g7q`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@u8foah`} label={getLabel(22913, '元素样式')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        {disabled == false ? <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@jb6g2n`} style={{width: '100%', height: '30px', lineHeight: '30px'}}
                                                            disabled={disabled} value={eStyleSelectedName}
                                                            onSearch={this.onShow}/> :
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@f02pid`} value={eStyleSelectedName} style={{width: '100%', height: '30px', lineHeight: '30px'}} disabled={true}/>
                        }

                        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@87286z`}
                            visible={visible}
                            title={getLabel(517453, '选择元素样式')}
                            icon="icon-coms-portal"
                            iconBgcolor='#1a57a0'
                            className="custom-element-style-select-dialog"
                            style={{width: 1000, height: 589}}
                            zIndex={1050}
                            buttons={this.getButtons()}
                            onCancel={this.onCancel}

                        >
                            <div className={'portal-esetting-browser-search'}>
                                <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@jr7b2u`} style={{float: 'right', marginRight: '20px'}}  placeholder={getLabel(520688, '按元素样式名称搜索')} onSearch={(value) => {this.refs.styleselect && this.refs.styleselect.onSearch(value)}}/>
                            </div>
                            <ElementStyleSelect ecId={`${this && this.props && this.props.ecId || ''}_ElementStyleSelect@zys7om`}  ref="styleselect" pageTotal={length} value={eStyleSelected} displayPosition={displayPosition}/>
                        </WeaDialog>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@0pxne8`} label={getLabel(19492, '元素图标')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@qpsftd`} value={eIcon} disabled={disabled} onChange={value => this.setState({eIcon: value})}/>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4ph31e`} label={getLabel(207, '高度')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@vwr9vb`} value={'' + eHeight} style={{width: '50px'}} disabled={disabled} onChange={value => this.setState({eHeight: value})}/>
                        <span style={{marginLeft: '8px'}}>{getLabel(386531, '自适应高度（0）')}</span>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@q062kz`} label={getLabel(15932, '间距')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <span>{getLabel(386532, '上间距：')}</span>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@ua0zx8`} value={eSpacing.top} style={{width: '40px'}} disabled={disabled} onChange={value => this.setState({eSpacing: {...eSpacing, top: value}})}/>
                        <span style={{marginLeft: '8px'}}>{getLabel(386533, '右间距：')}</span>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@6jo7hy`} value={eSpacing.right} style={{width: '40px'}} disabled={disabled} onChange={value => this.setState({eSpacing: {...eSpacing, right: value}})}/>
                        <span style={{marginLeft: '8px'}}>{getLabel(386534, '下间距：')}</span>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@2irfeb`} value={eSpacing.bottom} style={{width: '40px'}} disabled={disabled} onChange={value => this.setState({eSpacing: {...eSpacing, bottom: value}})}/>
                        <span style={{marginLeft: '8px'}}>{getLabel(386535, '左间距：')}</span>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@v7ahs0`} value={eSpacing.left} style={{width: '40px'}} disabled={disabled} onChange={value => this.setState({eSpacing: {...eSpacing, left: value}})}/>
                    </WeaFormItem>
                    {eContent.methodvalue && <ETabStyle ecId={`${this && this.props && this.props.ecId || ''}_ETabStyle@zd1mm4`} ref="eTabStyle" tabstyle={displayPosition == 'bottom' ? eContent.tabstyle : '0'} tabindex={eContent.tabindex} tabStyleList={tabStyleList}  tabvalue={eContent.tabvalue}  disabled={eShareLevel == '2' && displayPosition == 'bottom' ? false : true} displayPosition = {displayPosition} tabname={eContent.tabname} onChangeTabwidth={(value) => {
                        this.setState({etabwidth: value})
                    }}/>}
                    {etabwidth && eContent.methodvalue &&<ETabWidth ecId={`${this && this.props && this.props.ecId || ''}_ETabWidth@30xj46`} ref="eTabWidth" tabwidth={etabwidth} methodvalue={eContent.methodvalue} disabled={disabled}/>}
                    {eContent.isAlwaysShow &&<ETabDisplay ecId={`${this && this.props && this.props.ecId || ''}_ETabDisplay@ps51m4`} ref="eTabDisplay" value={eContent.isAlwaysShow} disabled={disabled}/>}
                </WeaSearchGroup>
            </div>
        );
    }

    onShow() {
        this.setState({visible: true});
    }
    onCancel() {
        this.setState({visible: false});
    }
    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@oopy5q`} type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        // buttons.push(<Button type="primary" onClick={this.onClear}>{getLabel(311, '清除')}</Button>);
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@czqq26`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }

    onOk() {
        const selected = this.refs.styleselect.getSelectedValue();
        const displayPosition = this.refs.styleselect.getSelectedValuedisplayPosition();
        this.setState({visible: false,eStyleSelected:selected,displayPosition:displayPosition});
    }

    getSaveValues() {
        const {eContent= {}} = this.props
        if(eContent.etabwidth && eContent.methodvalue) {
            if(eContent.isAlwaysShow){
                return {
                    eStyleList: this.state.eStyleSelected,
                    eStyleIcon: this.state.eIcon,
                    eStyleHeight: this.state.eHeight,
                    eStyleSpacing: this.state.eSpacing,
                    eContentTabWidth: this.refs['eTabWidth'].getSaveValues(),
                    eContentIsAlwaysShow: this.refs['eTabDisplay'].getSaveValues(),
                    eContenteTabStyle: this.refs['eTabStyle'].getSaveValues(),
                };
            }else{
                return {
                    eStyleList: this.state.eStyleSelected,
                    eStyleIcon: this.state.eIcon,
                    eStyleHeight: this.state.eHeight,
                    eStyleSpacing: this.state.eSpacing,
                    eContentTabWidth: this.refs['eTabWidth'].getSaveValues(),
                    eContenteTabStyle: this.refs['eTabStyle'].getSaveValues(),
                };
            }

        }else {
            return {
                eStyleList: this.state.eStyleSelected,
                eStyleIcon: this.state.eIcon,
                eStyleHeight: this.state.eHeight,
                eStyleSpacing: this.state.eSpacing,
            };
        }
    }
}

export default Tab4Style;


class ElementStyleSelect extends React.Component {
    state = {
        pageCurrent:1,
        pageSize:8,
        pageTotal:this.props.pageTotal,
        data : [],
        lenght: 0,
        value:this.props.value,
        displayPosition:this.props.displayPosition,
    };

    constructor(props) {
        super(props);
        this.onPageCurrentChange = this.onPageCurrentChange.bind(this);
        this.onPageSizeChange = this.onPageSizeChange.bind(this);
        this.onSearch = this.onSearch.bind(this);
    }

    componentWillMount(){
        this.getDatas();
    }

    onSearch(name) {
        this.getDatas(name);
        this.onPageCurrentChange(1);
    }


    getDatas(name){
        WeaTools.callApi('/api/portal/elementStyleLib/getElementStyles', 'GET', {
            menustylename: name,
            flag : "1"
        }).then(result => {
            const {data} = result;
            this.setState({
                data : data,
                pageTotal: data.length,
            })
        });
    }

    onCheck(file) {
        this.setState({value: file.id,displayPosition:file.displayPosition});
    }

    getSelectedValuedisplayPosition() {
        return this.state.displayPosition;
    }

    getSelectedValue() {
        return this.state.value;
    }

    onPageCurrentChange(pageCurrent) {
        this.setState({pageCurrent: pageCurrent});
    }

    onPageSizeChange(current, pageSize) {
        this.setState({pageSize: pageSize});
        this.onPageCurrentChange(1);
    }

    render() {

        const {data,pageCurrent,pageSize,pageTotal,value} = this.state;
        let row = [], col = [];
        for (let i = 0, len = data.length; i < len; i++) {
            col.push(data[i]);
            if (i % 2 == 1 || i == len - 1) {
                row.push(col);
                col = [];
            }
        }
        const start = (pageCurrent - 1) * (pageSize / 2);
        const end = start + (pageSize / 2);
        const _data = row.slice(start, end);
        return(
            <div className="custom-element-style-select" style={{height: '100%',paddingBottom:'100px'}}>
            	<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@4hbvqj`} height="100%">
                    <div className="portal-p4e-esl" style={{}} >
                        <div className="portal-p4e-esl-table">
                            {
                                _data.map((row, index) => {
                                    return (
                                        <div key={index} className="portal-p4e-esl-tr" style={{float:'left',width:'980px'}}>
                                            {
                                                row.map((col,index) => {
                                                    let checked = false;
                                                    let checkedstyle = {
                                                        padding : '10px',
                                                        margin: '10px',
                                                        border: '1px solid #e2e2e2',
                                                        float:'left',
                                                        overflow:'auto',
                                                        height:'260px',
                                                    }
                                                    if(col.id == value) {
                                                        checked = true;
                                                        checkedstyle = {
                                                            padding : '10px',
                                                            margin: '10px',
                                                            border: '1px solid #00a9ff',
                                                            float:'left',
                                                            overflow:'auto',
                                                            height:'260px',
                                                        }
                                                    }
                                                    return (
                                                        <div className="scroll-dandle" style={{...checkedstyle}}>
                                                        <div title = {col.langtitle} style={{width:'430px',height:'30px',lineHeight:'30px',textOverflow:'ellipsis',overflow:'hidden',whiteSpace:'nowrap'}} onClick={() => this.onCheck(col)}><Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@wf8z10@${col.id}`} checked={checked}/>&nbsp;&nbsp;{col.langtitle}</div>
                                                        <div key={col.id} className="portal-p4e-esl-td" style={{width:'430px',height:'190px'}}>
                                                            <div className="portal-p4e-esl-preview">
                                                                <div className="portal-p4e-esl-item">
                                                                    <style type="text/css" dangerouslySetInnerHTML={{__html: col.css}}/>
                                                                    <Item ecId={`${this && this.props && this.props.ecId || ''}_Item@v4gqce@${col.id}`} data={col}/>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        </div>
                                                    );
                                                })
                                            }
                                        </div>
                                    );
                                })
                            }
                        </div>
                    </div>
                </WeaNewScroll>
                <div style={{position: 'absolute', right: 0, margin: '10px',bottom:'0px'}}>
                    <Pagination ecId={`${this && this.props && this.props.ecId || ''}_Pagination@hu3poj`}
                        showSizeChanger
                        showQuickJumper
                        current={pageCurrent}
                        pageSize={pageSize}
                        total={pageTotal}
                        showTotal={total => `${getLabel(18609, '共')} ${pageTotal} ${getLabel(18256, '条')}`}
                        pageSizeOptions={['2', '4', '6', '8']}
                        onChange={this.onPageCurrentChange}
                        onShowSizeChange={this.onPageSizeChange}
                    />
                </div>
            </div>
        )


    }
}
